 <template>
  <div id="advertising-list">
    <div class="search-box">
      <Row type="flex">
        <Row type="flex" justify="start" class="search-item-left">
          <Col class="search-item">
            <span class="search-label">广告名称:</span>
            <Input v-model="searchObj.adName" placeholder="请输入" @on-keyup="filterName"></Input>
          </Col>
          <Col class="search-item">
            <span class="search-label">广告位:</span>
            <Select v-model="searchObj.adPlaceId" @on-change="doSearch">
              <Option
                v-for="item in adPlaceList"
                :value="item.adPlaceId"
                :key="item.adPlaceId"
              >{{ item.adPlaceName }}</Option>
            </Select>
          </Col>
          <Col class="search-item">
            <span class="search-label">创建人:</span>
            <Input v-model="searchObj.creatorName" placeholder="请输入"></Input>
          </Col>
          <Col class="search-item">
            <Button class="search-btn" type="primary" @click="doSearch">查询</Button>
          </Col>
          <Col class="search-item">
            <Button class="search-btn" @click="resetBtn">重置</Button>
          </Col>
        </Row>
        <Row type="flex" justify="end" class="search-item-right">
          <Col class="search-item">
            <Button v-if="exampleShow" @click="exampleOpen">
              收起筛选
              <Icon type="ios-arrow-down" />
            </Button>
            <Button v-else @click="exampleOpen">
              更多筛选
              <Icon type="ios-arrow-up" />
            </Button>
          </Col>
        </Row>
      </Row>
      <div class="search-example" v-show="exampleShow">
        <Row type="flex">
          <Col class="search-item">
            <span class="search-label">展示时间:</span>
            <DatePicker
              ref="showTime"
              :editable="false"
              v-model="showTime"
              format="yyyy-MM-dd"
              placement="bottom"
              type="daterange"
              @on-change="selectCompareTime"
            ></DatePicker>
          </Col>
          <Col class="search-item">
            <span class="search-label">创建时间:</span>
            <DatePicker
              ref="creatorTime"
              :editable="false"
              v-model="creatorTime"
              format="yyyy-MM-dd HH:mm:ss"
              placement="bottom"
              type="datetimerange"
              @on-change="selectCreateTime"
            ></DatePicker>
          </Col>
        </Row>
      </div>
      <Row type="flex" justify="end" style="margin-right: 12px;">
        <Col class="search-item">
          <Button
            class="search-btn"
            type="primary"
            style="width:90px;"
            @click="advertisingRank"
          >广告排序</Button>
        </Col>
        <Col class="search-item">
          <Button
            class="search-btn"
            type="primary"
            style="width:90px;"
            @click="addAdvertising"
            v-if="hasPermission('moms:globalsetting:adcreate')"
          >添加广告</Button>
        </Col>
      </Row>
    </div>
    <Table stripe class="table-list" :columns="columns" :data="tableData" :loading="loading">
      <!-- 广告位类型 -->
      <template slot-scope="{ row }" slot="adPlaceType">
        <span>{{ row.adPlaceType===0?"Banner":row.adPlaceType===1?"启动页全屏":row.adPlaceType===2?"通栏":"" }}</span>
      </template>
      <template slot-scope="{ row }" slot="beginAt">
        <span>{{ row.beginAt}} - {{ row.endAt}}</span>
      </template>
      <template slot-scope="{ row }" slot="action">
        <i
          class="iconsys icondetail"
          title="查看"
          v-if="hasPermission('moms:globalsetting:addetail')"
          @click="viewDetails(row)"
        ></i>
        <i
          class="iconsys iconedit"
          title="编辑"
          v-if="hasPermission('moms:globalsetting:adupdate')"
          @click="advertisingEdit(row)"
        ></i>
        <Poptip confirm :title="'你确定要上架吗？'" transfer width="150" @on-ok="doStatus(row, 1)">
          <i
            class="iconsys iconshangjia"
            title="上架"
            v-if="hasPermission('moms:globalsetting:adstatusupdate') && (row.adStatus === 0 || row.adStatus === 2)"
          ></i>
        </Poptip>
        <Poptip confirm :title="'你确定要下架吗？'" transfer width="150" @on-ok="doStatus(row, 2)">
          <i
            class="iconsys iconxiajia"
            title="下架"
            v-if="hasPermission('moms:globalsetting:adstatusupdate') && row.adStatus === 1"
          ></i>
        </Poptip>
      </template>
    </Table>
    <Row type="flex" justify="end" style="padding: 20px">
      <Page
        :total="adtotal"
        :current.sync="searchObj.pageIndex"
        :page-size="searchObj.pageSize"
        @on-change="handlePage"
        @on-page-size-change="handlePageSize"
        show-sizer
        show-total
      />
    </Row>
  </div>
</template>
<script>
import { getadPlaceList, getadList, adStatusChange } from '@/api/advertising/index'
export default {
  name: 'advertising_list',
  data () {
    return {
      exampleShow: false,
      tableData: [],
      adtotal: 0,
      loading: false,
      // 渠道
      channelList: [
        { value: -1, label: '全部' },
        { value: 0, label: '微信' },
        { value: 1, label: '一体机' },
        { value: 2, label: '刷卡器' },
        { value: 3, label: '收银台' },
        { value: 4, label: '口碑' },
        { value: 5, label: '美团' }
      ],
      // 广告位列表
      adPlaceList: [],
      columns: [
        {
          title: '广告ID',
          key: 'adNo',
          width: '80'
        },
        {
          title: '广告名称',
          key: 'adName'
        },
        {
          title: '广告位',
          key: 'adPlaceName'
        },
        {
          title: '广告位类型',
          slot: 'adPlaceType'
        },
        {
          title: '展示时间',
          slot: 'beginAt'
        },
        {
          title: '创建人',
          key: 'creatorName'
        },
        {
          title: '创建时间',
          key: 'createAt'
        }
      ],
      showTime: [],
      creatorTime: [],
      searchObj: {
        adPlaceId: '', // 广告位id
        adName: '', // 广告名称
        compareBeginAt: '', // 展示时间起始
        compareEndAt: '', // 展示时间结束
        createAtStart: '', // 创建时间起始
        createAtEnd: '', // 创建时间结束
        creatorName: '', // 创建人名称
        pageIndex: 1,
        pageSize: 10
      }
    }
  },
  created () {
    this.getadPlaceList()
    this.doSearch()
    if (
      this.hasPermission([
        'moms:globalsetting:addetail',
        'moms:globalsetting:adupdate',
        'moms:globalsetting:adstatusupdate'
      ])
    ) {
      this.columns.push({
        title: '操作',
        slot: 'action',
        width: '130'
      })
    }
  },
  watch: {
    $route (newRoute) {
      if (newRoute.name === 'advertising_list') {
        this.doSearch()
      }
    }
  },
  methods: {
    doSearch () {
      this.searchObj.pageSize = 10
      this.searchObj.pageIndex = 1
      this.getadList()
    },
    filterName () {
      this.searchObj.adName = this.searchObj.adName.replace(/\s+/g, '')
    },
    // 查询广告位列表
    getadPlaceList () {
      getadPlaceList({
        merchantId: this.$store.state.user.merchantId, // 商户id
        channelId: '', // 渠道ID
        adPlaceType: '', // 广告位类型
        adPlaceName: '', // 广告位名称
        creatorName: '', // 创建人名称
        createAtStart: '', // 创建时间起始
        createAtEnd: '' // 创建时间结束
      })
        .then(res => {
          if (res.data.status === 200) {
            if (res.data.totalCount > 0) {
              this.adPlaceList = res.data.data
            } else {
              this.adPlaceList = []
            }
          } else {
            this.$Message.error(`${res.data.error}`)
          }
        })
        .catch(error => {
          this.$Message.error(`${this.showError(error)}`)
        })
    },
    // 查询广告列表
    getadList () {
      this.loading = true
      getadList({
        merchantId: this.$store.state.user.merchantId, // 商户id
        adPlaceId: this.searchObj.adPlaceId, // 广告位id
        adName: this.searchObj.adName, // 广告名称
        creatorName: this.searchObj.creatorName, // 创建人名称
        sortBy: 'createAt', // 时间排序
        compareBeginAt: this.searchObj.compareBeginAt ? this.searchObj.compareBeginAt + ' 00:00:00' : '', // 展示时间起始
        compareEndAt: this.searchObj.compareEndAt ? this.searchObj.compareEndAt + ' 23:59:59' : '', // 展示时间结束
        createAtStart: this.searchObj.createAtStart, // 创建时间起始
        createAtEnd: this.searchObj.createAtEnd, // 创建时间结束
        offset: this.searchObj.pageSize * (this.searchObj.pageIndex - 1),
        limit: this.searchObj.pageSize
      })
        .then(res => {
          this.loading = false
          if (res.data.status === 200) {
            if (res.data.totalCount > 0) {
              this.tableData = res.data.data
              this.adtotal = res.data.totalCount
            } else {
              this.tableData = []
              this.adtotal = 0
            }
          } else {
            this.$Message.error(`${res.data.error}`)
          }
        })
        .catch(error => {
          this.loading = false
          this.$Message.error(`${this.showError(error)}`)
        })
    },
    // 分页操作
    handlePage (val) {
      this.searchObj.pageIndex = val
      this.getadList()
    },
    handlePageSize (val) {
      this.searchObj.pageSize = val
      this.searchObj.pageIndex = 1
      this.getadList()
    },
    // 选择展示时间
    selectCompareTime (e) {
      this.searchObj.compareBeginAt = e[0]
      this.searchObj.compareEndAt = e[1]
    },
    // 选择创建时间
    selectCreateTime (e) {
      this.searchObj.createAtStart = e[0]
      this.searchObj.createAtEnd = e[1]
    },
    // 重置
    resetBtn () {
      this.showTime = []
      this.creatorTime = []
      this.searchObj = {
        adPlaceId: '', // 广告位id
        adName: '', // 广告名称
        compareBeginAt: '', // 展示时间起始
        compareEndAt: '', // 展示时间结束
        createAtStart: '', // 创建时间起始
        createAtEnd: '', // 创建时间结束
        creatorName: '', // 创建人名称
        pageIndex: 1,
        pageSize: 10
      }
      this.getadList()
    },
    // 更多筛选
    exampleOpen () {
      this.exampleShow = !this.exampleShow
    },
    // 广告排序
    advertisingRank () {
      this.$router.push({ name: 'advertising_rank' })
    },
    // 添加广告位
    addAdvertising () {
      this.$router.push({ name: 'advertising_create' })
    },
    // 查看
    viewDetails (row) {
      this.$router.push({ name: 'advertising_detail', params: { id: row.adId, type: 1 } })
    },
    // 编辑
    advertisingEdit (row) {
      this.$router.push({ name: 'advertising_edit', params: { id: row.adId, type: 1 } })
    },
    // 上架和下架
    doStatus (row, type) {
      adStatusChange({
        merchantId: this.$store.state.user.merchantId, // 商户id
        adId: row.adId, // 广告id
        adStatus: type, // 状态 0未上架 1已上架 2已下架
        updaterName: this.$store.state.user.userName,
        updater: this.$store.state.user.userId
      })
        .then(res => {
          const result = res.data || {}
          if (result.status === 200) {
            this.$Message.success((type === 1 ? '上架' : '下架') + '成功！')
            this.getadList()
          } else {
            this.$Message.error(`${result.error}`)
          }
        })
        .catch(err => {
          this.$Message.error(`${err}`)
        })
    }
  },
  computed: {}
}
</script>
<style lang='less'>
#advertising-list {
  .search-box {
    .search-item {
      .ivu-date-picker {
        width: 280px;
        .ivu-date-picker-editor {
          width: 280px;
        }
      }
    }
  }
}
</style>
